<template>
  <!-- 一般头部 -->
  <div class="headUsual">
      <mt-header :title="title" fixed>
        <router-link :to="to" slot="left" v-if="flag">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button  slot="right" class="headusual-2">
          <svg class="icon icon-list" aria-hidden="true"  @click="popup_search">
            <!-- <use xlink:href="#icon-sousuo"></use> -->
          </svg>
          <svg class="icon icon-fenlei" aria-hidden="true" @click="popup_list">
            <use xlink:href="#icon-fenlei"></use>
          </svg>           
        </mt-button>    
      </mt-header> 
       <!-- 头部列表弹出层 -->
      <mt-popup v-model="popupList" position="top" class="tanchu-head">
            <!-- 下面列表 -->
        <div class="list-all">
          <div class="list-group list-group-01">
              <div @click="handleTurn('/index')">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-shouye-copy"></use>
                  </svg>
                  <p>首页</p>                             
              </div>
              <div  @click="handleTurn('/position')">
                  <svg class="icon icon-position" aria-hidden="true">
                    <use xlink:href="#icon-yingpinzhiwei-copy-01-copy"></use>
                  </svg>
                  <p>招聘</p>                             
              </div>
                <div  @click="handleTurn('/service/index')">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-gonglve-1-copy"></use>
                  </svg>
                  <p>服务</p>                             
              </div>
             
              <div  @click="handleTurn('/projects')">
                  <svg class="icon icon-project" aria-hidden="true">
                    <use xlink:href="#icon-fl-gongcheng"></use>
                  </svg>
                  <p>项目大厅</p>                             
              </div>
              
          </div>
            <div class="list-group">
              <div  @click="handleTurn('/bleachery')">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-xiangmuguanli"></use>
                  </svg>
                  <p>晒场</p>                             
              </div>
             <div  @click="handleTurn('/zgz')">
                  <img src="~@/assets/list-zgz.png"/>
                  <p>筑功者</p>                             
              </div>
             
              <div @click="handleTurn('/user/resume')">
                  <svg class="icon icon-list" aria-hidden="true">
                    <use xlink:href="#icon-bangzhu-copy-1-copy"></use>
                  </svg>
                  <p>帮助中心</p>                             
              </div>
               <div  @click="handleTurn('/user/vip')">
                  <img src="~@/assets/list-jineng.png"/>
                  <p>加入会员</p>                             
              </div>
          </div>
        </div>
      </mt-popup>
      <!-- 搜索框弹出层 -->
      <mt-popup v-model="popupSearch" position="right" class="popup-search">
           <div class="header">
              <div @click="turn_back" class="header-left">
                  <svg class="icon" aria-hidden="true"  >
                    <use xlink:href="#icon-shang-copy-copy-copy-copy"></use>
                  </svg>
              </div> 
            <div class="header-middle">
                <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input type="text" placeholder="找专业人做专业事儿"/>
            </div>
            <p class="header-right">搜索</p>
        </div>
        <div class="search-tips">
            <p>
              <svg class="icon" aria-hidden="true"  >
                <use xlink:href="#icon-shijian"></use>
              </svg>
              <span v-show="tipsShow">最近搜索</span>
              <span v-show="!tipsShow">暂无搜索记录</span>
            </p>
            <p class="tips-delete" @click="delete_tips" v-show="tipsShow">
              <svg class="icon" aria-hidden="true"  >
                <use xlink:href="#icon-shanchu"></use>
              </svg>
            </p>
        </div>
        <ul class="search-list" v-if="tipsShow">
          <li><span>工地改建</span></li>
          <li><span>工地改建</span></li>
          <li><span>工地改建</span></li>
          <li><span>工地改建</span></li>
          <li><span>工地改建</span></li>
          <li><span>工地改建</span></li>
        </ul>
      </mt-popup>
  </div>      
</template>
<script>
import { Header, Popup } from "mint-ui";
export default {
  data() {
    return {
      flag: true,
      popupList: false, //弹出下拉列表
      popupSearch: false, //弹出搜索框
      tipsShow:true //展示搜索记录
    };
  },
  props: {
    title: String,
    to: String
  },
  methods: {
    // 弹出下拉列表
    popup_list() {
      this.popupList = !this.popupList;
    },
    //弹出搜索框
    popup_search(){
      this.popupSearch=true;
    },
    //搜索框关闭，返回上一层
    turn_back(){
      this.popupSearch=false;
    },
    //删除浏览记录
    delete_tips(){
      this.tipsShow=false;

    },
    handleTurn(item){
      this.$router.push(item);
       this.$store.state.fixflag=false;
    }
  },
  created() {
    if (this.title == "筑功者"|this.title=="个人中心"|this.title=="项目列表") {
      this.flag = false;
      return;
    }
    
  },
  watch:{
    popupList(val,oldv){
      this.$store.commit('movePre',val);
    },
  $route(to,from){
    console.log(to.path);
  }
  }
};
</script>

<style lang="scss" scoped>
.headUsual {
  width: 100%;
  height: 52px;
  
}
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 52px;
  border-bottom: 2px solid #f4f4f4;
  .headusual-2 {
    width: 100px;
    text-align: right;
    .icon {
      display: block;
      float: left;
    }
    .icon-list {
      
      margin-left: 30.67px;
      height: 30px;
    }
    .icon-fenlei{
       height: 30px;
       margin-left:25px;
       font-size: 22px;
      
    }
  }
}
.mint-popup {
  width: 100%;
  // height: 100%;
}
// 头部列表弹出层
.tanchu-head {
  margin-top: 52px;
  // 头部
  .mint-header {
    background: white;
    color: #282828;
    font-size: 18px;
    height: 52px;
    border-bottom: 1px solid #f4f4f4;
    .headusual-2 {
      width: 100px;
      text-align: right;
      .icon {
        display: block;
        float: left;
      }
      .icon-list {
        margin-right: 25px;
        margin-left: 30.67px;
      }
    }
  }

  .mint-header-title {
    color: #fd4f00;
    font-size: 18px;
  }
  .list-all {
    padding: 14px 20px;
    .list-group {
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
        div{
        flex: 0 0 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        display: block;
        text-align: center;
        img {
          width: 32.6px;
          height: 36px;
          display: block;
          margin: 0 auto;
          margin-bottom: 20px;
        }
        p {
          color: #282828;
          font-size: 14px;
        }
        .icon {
          font-size: 38px;
          color: #3887fe;
          margin-bottom: 13px;
        }
        // .icon-project{
        //   font-size: 40px;
        // }
        // .icon-position{
        //   font-size: 40px;
        // }
      }
    }
    .list-group-01 {
      margin-bottom: 28px;
    }
  }
}
//搜索框弹出层
.popup-search{
  height: 100%;
    /* 头部 */
.header{
    height: 52px;
    display: flex;
    align-items: center;
    background: #eeeeee;
   
}
.header-left{
  width: 40px;
  margin-left:5px;
  .icon{
       font-size: 25px;
  }
   
   
}
.header-middle{ 
    margin-left:15px;
    width: 299.6px;
    height: 29.3px;
    background: #ffffff;
    border-radius:3px;
    display: flex;
    align-items: center;

}
.header-middle>.icon{
    font-size: 16px;
    margin-left:6px;
    margin-right:10px;
    color:#999999;
}
.header-middle>input{
    
    color:#999999;
    font-size: 14px;
    width: 261.3px;
    
    border:none;
    
    
}
.header-right{
    margin-left:11px;
    color:#999999;
    font-size: 14px;
    height: 52px;
    line-height: 52px;
}
.search-tips{
  margin-top:14px;
  margin-left:11px;
  margin-right: 11px;
  display: flex;
  font-size: 14px;
  color:#666666;
  justify-content: space-between;
    p{
      display: flex;
      align-items: center;
      span{
        margin-left: 7px;
      }
    }
    .tips-delete{
      width: 20px;
      height: 20px;
      text-align: center;
    }
}
.search-list{
  padding: 16px 11px ;
  display: flex;
  flex-wrap: wrap;
  
  
    li{
      flex:0 0 25%;
      display: flex;
      text-align: center;
      margin-bottom: 10px;
      justify-content: center;
      span{
        width: 87px;
        height: 29px;
        line-height: 29px;
        display: block;
        background: #eeeeee;
        
      }
    }

}
}

</style>
